<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="yes" name="apple-touch-fullscreen" />
    <meta content="telephone=no,email=no" name="format-detection" />
    <meta content="maximum-dpr=2" name="flexible" />
    <title>商品列表</title>
</head>
<script
  src="https://code.jquery.com/jquery-2.2.4.js"
  integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
  crossorigin="anonymous"></script>
<!-- <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script> -->
<script>
    (function(doc, win) {
        var docEl = doc.documentElement,
            isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
            dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1,
            dpr = window.top === window.self ? dpr : 1, //被iframe引用时，禁止缩放
            dpr = 1,
            scale = 1 / dpr,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
        docEl.dataset.dpr = dpr;
        var metaEl = doc.createElement('meta');
        metaEl.name = 'viewport';
        metaEl.content = 'initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale;
        docEl.firstElementChild.appendChild(metaEl);
        var recalc = function() {
            var width = docEl.clientWidth;
            if (width / dpr > 750) {
                width = 750 * dpr;
            }
            // 乘以100，px : rem = 100 : 1
            docEl.style.fontSize = 100 * (width / 750) + 'px';
        };
        recalc()
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
    })(document, window);
</script>
  <style>
      body{
          margin: 0;
      }
      p{
          margin: 0;
      }
      .header{
          width: 100%;
          height: 0.8rem;
          line-height: 0.8rem;
          background: #FEC70C;
          position: fixed;
          top: 0;
          left: 0;
          text-align: center;
          font-size: 0.34rem;
          color: #333333;
          font-weight: bold;
          z-index: 9999;
      }
      .container{
          margin-top: 0.8rem;
          position: relative;
      }
      .shop_list{
          padding-top: 0.3rem;
          margin: 0.3rem;
          display: flex;
          box-sizing: border-box;
          border-bottom: 1px solid #F9F9FB;
      }
      .shop_list~.shop_list{
        padding-top: 0rem;
      }
      .left_img{
        display: inline-block;
        width: 1.6rem;
        height: 1.98rem;
        border-radius: 0.1rem;
        overflow: hidden;
        margin-right: 0.3rem;
      }
      .left_img img{
          width: 100%;
          height: 100%;
      }
      .right_details{
        flex: 1;
      }
  </style>
<body>
    <div class="header">
        商品列表
    </div>
    <div class="container">
        <div class="shop_list">
            <div class="left_img">
                <img src="./img/shop.png" alt="">
            </div>
            <div class="right_details">
                <p style="font-size: 0.28rem;margin: 0.18rem 0 0.32rem 0;">白色陶瓷精美碗筷一体套装</p>
                <p style="font-size: 0.36rem;color:#FD444C">￥88.00</p>
                <div style="display: flex;vertical-align: middle;margin-top: 0.4rem;margin-bottom: 0.5rem;">
                    <img style="width: 0.34rem;height:0.34rem;display: inline-block;vertical-align: baseline;margin-right: 0.2rem;" src="./img/wechet.png" alt="">
                    <span style="font-size: 0.24rem;margin-right: 0.48rem;">微信支付</span>
                    <img style="width: 0.34rem;height:0.34rem;display: inline-block;vertical-align: baseline;margin-right: 0.2rem;" src="./img/alipay.png" alt="">
                    <span style="font-size: 0.24rem;">支付宝支付</span>
                </div>
            </div>
        </div>        
    </div>
</body>
<script>
    // $('.container').html('dddddd')
    var html=''
    for(var i=0;i<5;i++){
        html+=`
        <div class="shop_list">
            <div class="left_img">
                <img src="./img/shop.png" alt="">
            </div>
            <div class="right_details">
                <p style="font-size: 0.28rem;margin: 0.18rem 0 0.32rem 0;">白色陶瓷精美碗筷一体套装</p>
                <p style="font-size: 0.36rem;color:#FD444C">￥88.00</p>
                <div style="display: flex;vertical-align: middle;margin-top: 0.4rem;margin-bottom: 0.5rem;">
                    <img style="width: 0.34rem;height:0.34rem;display: inline-block;vertical-align: baseline;margin-right: 0.2rem;" src="./img/wechet.png" alt="">
                    <span style="font-size: 0.24rem;margin-right: 0.48rem;">微信支付</span>
                    <img style="width: 0.34rem;height:0.34rem;display: inline-block;vertical-align: baseline;margin-right: 0.2rem;" src="./img/alipay.png" alt="">
                    <span style="font-size: 0.24rem;">支付宝支付</span>
                </div>
            </div>
        </div>
        `
    }
    $('.container').html(html)

    $('.shop_list').click(function(){
        window.location.href='./shop_details.html'
    })
</script>
</html>